<template>
  <div class>
    <template-table :temInput="temInput" :temTable="temTable" :temTab="temTab" :url="selUrl"
      @handleSelectionChange="handleSelectionChange" @tableBtnClick="tableBtnClick" @inputBtnClick="inputBtnClick"
      @selChange="selChange" ref="temTable">
    </template-table>

    <!-- 分配弹窗 -->
    <!-- <el-dialog 
        title="分配门店"
        :visible.sync="centerDialogVisible"
        width="30%"
        :destroy-on-close="true">
        <el-form 
          ref="ruleForm"
          :model="ruleForm"
          label-width="100px">
          <el-form-item label="选择分销商">
            <el-select
              v-model="ruleForm.userinfoCompname"
              placeholder="请选择分销商">
              <el-option 
                v-for="item in delarOpt"
                :key="item.userinfoCompname"
                :label="item.userinfoCompname"
                :value="item.userinfoCode">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span 
          slot="footer"
          class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
        </span>
      </el-dialog> -->

    <!-- 查看弹窗 -->
    <datail :visibledata="visiblesee" :data="rowInfo" :aptitude="'user'" @toggle="toggleVisible" ref="getDetail">
    </datail>

    <!-- 批量审核对话框 -->
    <el-dialog title="审核" :visible.sync="dialogVisibleALL" width="40%" @close="piliangShenhehandleClose">
      <el-form :model="ruleIndex">
        <div class="main">
          <div style="text-align: center; margin: 20px 0">是否确认批量审核选中的客户？</div>
        </div>
        <el-form-item label="审批意见：" required>
          <el-input style="width: 100%" type="textarea" :rows="2" placeholder="请输入审批意见"
            v-model.trim="ruleIndex.textarea" maxlength="200" @input="descInput">
          </el-input>
        </el-form-item>
        <span style="color: #999; float: right">{{ remnant }}/200</span>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="piliangReject">审核拒绝</el-button>
        <el-button type="primary" @click="piliangShenhe()">审核成功</el-button>
      </div>
    </el-dialog>

    <!-- 单个审核对话框 -->
    <el-dialog title="审核" :visible.sync="dialogVisible" width="40%" @close="dangeShenhehandleClose">
      <el-form :model="ruleIndex">
        <el-form-item label="审批意见：" required>
          <el-input style="width: 100%" type="textarea" :rows="2" placeholder="请输入审批意见"
            v-model.trim="ruleIndex.textarea" maxlength="200" @input="descInput">
          </el-input>
        </el-form-item>
        <span style="color: #999; float: right">{{ remnant }}/200</span>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dangeReject(userAudit)">审核拒绝</el-button>
        <el-button type="primary" @click="dangeShenhe(userAudit)">审核成功</el-button>
      </div>
    </el-dialog>

    <!-- 批量分配管理组织对话框 -->
    <el-dialog title="分配管理组织" :visible.sync="assignAManagementOrganizationVisible" width="85%" @close="closed2">
      <!-- 分配管理组织树形选择器 -->
      <manageOrganization @selectRowChange="selectRowChange"></manageOrganization>

      <div slot="footer" class="dialog-footer">
        <el-button @click="() => { assignAManagementOrganizationVisible = false }">取消</el-button>
        <el-button type="primary" @click="assignAManagementOrganizationBtn()">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import manageOrganization from './component/manageOrganization.vue'
import { parseTime } from "#/utils/index"; //时间格式化
import {
  updateUserinfoapplyStateFail,
  updateUserinfoapplyState,
} from "@/api/shopglist";
import templateTable from "#/views/templates/templateTable";
import Mer from "@/api/dealer.js";
import datail from "./component/memberDetails";
export default {
  components: {
    templateTable,
    datail,
    manageOrganization,
  },
  data() {
    return {
      assignAManagementOrganizationVisible: false, // 分配管理组织
      parseTime: parseTime,
      remnant: 0,
      ruleIndex: {
        textarea: "",
      },
      dialogVisibledetil: true,
      dialogVisibleALL: false,
      dialogVisible: false,
      userAudit: {},
      multipleSelection: [],
      temInput: [
        {
          label: "组织名称",
          name: "userinfoChannelname",
          type: "text",
          value: "",
          placeholder: "请输入名称",
        },
        {
          label: "组织编码",
          name: "userinfoChannelcode",
          type: "text",
          value: "",
          placeholder: "请输入名称",
        },
        {
          label: "客户名称",
          name: "userinfoCompname",
          type: "text",
          value: "",
          placeholder: "请输入名称",
        },
        {
          label: "客户编码",
          name: "userinfoInvite",
          type: "text",
          value: "",
          placeholder: "请输入名称",
        },
        {
          label: "保证金缴纳",
          type: "select",
          name: "userinfoFeestatus",
          value: "",
          placeholder: "请选择保证金缴纳",
          options: [
            {
              label: "全部",
              value: "0,1",
            },
            {
              label: "已缴纳",
              value: "1",
            },
            {
              label: "未缴纳",
              value: "0",
            },
          ],
        },
        {
          label: "所属渠道",
          type: "select",
          name: "userinfoDischannelcode",
          value: "",
          placeholder: "请选择所属渠道",
          options: [
            {
              label: "全部",
              value: "0,1",
            },
            {
              label: "工程",
              value: "1",
            },
            {
              label: "民用",
              value: "0",
            },
          ],
        },
        {
          label: "管理组织",
          name: "companyName",
          type: "cascader",
          props: {
            label: "departName",
            value: "departName",
            children: "departList",
            filterable: true,
          },
          options: [],
          url:
            "/web/org/company/queryCompanyAndDepartPage.json",
          placeholder: "请选择管理组织",
          value: [],
        },
        {
          label: "联系人",
          name: "userNickname",
          type: "text",
          value: "",
          placeholder: "请输入名称",
        },
        {
          label: "联系电话",
          type: "text",
          name: "userinfoConPhone",
          value: "",
          placeholder: "请输入联系电话",
        },
        // {
        //   label: '审核人',
        //   name: 'userinfoConPhone',
        //   type: 'text',
        //   value: '',
        //   placeholder: '请输入审核人',
        // },
        // {
        //   label: "注册时间",
        //   type: "daterange",
        //   value: "",
        //   rangeSeparator: "~", //可选值，默认为至
        //   startPlaceholder: "开始日期", //可选值，默认是为开始时间
        //   name: "startDate,endDate",
        //   endPlaceholder: "结束日期",
        // },
        // {
        //   label: "所在地",
        //   name: "dataState",
        //   type: "select",
        //   placeholder: "",
        //   value: "",
        //   options: [
        //     {
        //       label: "",
        //       value: "0"
        //     }
        //   ]
        // },
        // {
        //   label: "审核时间",
        //   type: "daterange",
        //   value: "",
        //   rangeSeparator: "~", //可选值，默认为至
        //   startPlaceholder: "开始日期", //可选值，默认是为开始时间
        //   name: "gmtModifiedQstart,gmtModifiedQend",
        //   endPlaceholder: "结束日期",
        // },
        // {
        //   label: "分销商",
        //   name: "userInfoChannelCode",
        //   type: "text",
        //   value: "",
        //   placeholder: "请输入分配分销商"
        // },
        // {
        //   label: '审核状态',
        //   name: 'dataState',
        //   type: 'select',
        //   placeholder: '请选择审核状态',
        //   value: '',
        //   options: [
        //     {
        //       label: '待审核',
        //       value: '1',
        //     },
        //     {
        //       label: '审核通过',
        //       value: '2',
        //     },
        //     {
        //       label: '审核失败',
        //       value: '3',
        //     },
        //   ],
        // },
        {
          btnArray: [
            {
              label: "查询",
              id: "search",
              type: "primary",
            },
            {
              label: "清空",
              id: "clear",
            },
            {
              type: "primary",
              id: "exImportData",
              label: "导出",
              url: "/web/um/userDealer/queryUserDealerPageByApply.json?excelTemplate=retailerApplication",
            },
            {
              type: "primary",
              id: "assignAManagementOrganization",
              label: "分配管理组织",
            },
            {
              type: "primary",
              id: "assignARegionalManager",
              label: "分配大区经理",
            },
            // {
            //   label: "批量分配",
            //   url: "",
            //   id: "batch",
            //   type: "primary"
            // },
            // {
            //   label: "设为待分配",
            //   url: "",
            //   id: "allocated",
            //   type: "primary"
            // },
            // {
            //   label: "设为不分配",
            //   url: "",
            //   id: "notAllocated",
            //   type: "primary"
            // }
          ],
        },
      ],
      temTab: {
        tabPane: [
          {
            label: "全部",
            name: "dataState",
            value: "",
          },
          {
            label: "待审核",
            name: "dataState",
            value: "0",
          },
          {
            label: "审核通过",
            name: "dataState",
            value: "1",
          },
          {
            label: "审核拒绝",
            name: "dataState",
            value: "2",
          },
        ],
      },
      temTable: {
        selection: {
          state: true,
          params: [], //单选的参数
        },
        tableHead: [
          {
            prop: "userinfoCompname",
            label: "客户名称",
          },
          {
            prop: "userinfoInvite",
            label: "客户编码",
          },
          {
            prop: "userinfoChannelname",
            label: "组织名称",
          },
          {
            prop: "userinfoChannelcode",
            label: "组织编码",
          },
          {
            prop: "departCode",
            label: "管理组织",
          },
          {
            prop: "userinfoDischannelcode",
            label: "所属渠道",
          },
          {
            prop: "employeeName",
            label: "大区经理",
          },
          {
            prop: "qualityName",
            label: "客户类型",
          },
          {
            prop: "gmtCreate",
            label: "创建日期",
            template: "format",
          },
          {
            prop: "gmtModified",
            label: "修改日期",
            template: "format",
          },
          {
            prop: 'userinfoapplyDate',
            label: "审核日期",
            template: 'format',
          },
          {
            prop: 'userinfoapplyUname',
            label: '审核人',
          },
          {
            prop: "dataState",
            label: "状态",
            template: {
              // "2": "停用",
              // 0: "启用",
              // 1: "待审核",
              // 3: "审核拒绝",
              '0': '待审核',
              "1": '审核通过',
              "2": "审核拒绝",
            },
          },
          {
            prop: 'qualityDeposit',
            label: '保证金缴纳状态',
            template: {
              '1': '已缴纳',
              "0": '未缴纳',
            }
          },
          {
            prop: 'qualityAmt',
            label: '已缴纳保证金金额',
          },
          {
            prop: "userNickname",
            label: "联系人",
          },
          {
            prop: "userPhone",
            label: "电话号码",
          },
          {
            prop: "",
            label: "包装标签",
          },
        ],
        tableData: [],
        tableBtn: [
          {
            label: "审核",
            state: false,
            dataState: "0",
            id: "examine",
          },
          {
            label: "查看",
            state: true,
            id: "Tosees",
            // dataState: "0, 3",
            props: {
              dataState: "dataState",
            },
          },

          // {
          //   label: "查看",
          //   state: false,
          //   dataState: "2,3",
          //   props: {
          //     dataState: "dataState"
          //   },
          //   id: "see",
          //   template: {
          //     type: "json",
          //     title: "查看详情",
          //     html: [
          //       {
          //         label: "分配状态",
          //         type: "text",
          //         name: "userinfoTestsync",
          //         value: "",
          //         template: {
          //           "0": "待分配",
          //           "1": "已分配",
          //           "2": "不分配"
          //         }
          //       },
          //       {
          //         label: "审核状态",
          //         type: "text",
          //         name: "dataState",
          //         value: "",
          //         template: {
          //           "1": "待审核",
          //           "2": "审核通过",
          //           "3": "审核失败"
          //         }
          //       },
          //       {
          //         label: "门店名称",
          //         type: "text",
          //         name: "userinfoCompname",
          //         value: ""
          //       },
          //       {
          //         label: "手机号",
          //         type: "text",
          //         name: "userinfoConPhone",
          //         value: ""
          //       },
          //       {
          //         label: "所在地",
          //         type: "text",
          //         template: "area",
          //         name: [
          //           "provinceName",
          //           "cityName",
          //           "areaName",
          //           "companyAddress"
          //         ],
          //         value: ""
          //       },
          //       {
          //         label: "店主姓名",
          //         type: "text",
          //         name: "userinfoCon",
          //         value: ""
          //       },
          //       {
          //         label: "申请时间",
          //         type: "text",
          //         template: "format",
          //         name: "gmtCreate",
          //         value: ""
          //       },
          //       {
          //         label: "审核理由",
          //         type: "text",
          //         name: "memo",
          //         value: ""
          //       },
          //       {
          //         label: "审核时间",
          //         type: "text",
          //         template: "format",
          //         name: "gmtModified",
          //         value: ""
          //       }
          //     ]
          //   }
          // }
        ],
        tablePageBtn: [
          {
            label: "批量审核",
            id: "blacklist",
            url: "",
            type: "primary",
          },
        ],
      },
      selUrl: "web/um/userservice/queryUserinfoapplyPage.json",
      centerDialogVisible: false,
      delarOpt: [],
      ruleForm: {
        userinfoCompname: "",
      },
      visiblesee: false,
      rowInfo: {},
    };
  },
  created() { },
  mounted() {
    this.getMember();
  },
  methods: {
    loginState(h, item) {
      const parseTime = this.parseTime(item.gmtModified);
      if (item.dataState != 1) {
        return <div>{parseTime}</div>;
      }
    },
    descInput() {
      var txtVal = this.ruleIndex.textarea.length;
      this.remnant = 0 + txtVal;
    },
    // 关闭弹窗清除数据
    dangeShenhehandleClose() {
      this.ruleIndex.textarea = "";
      this.dialogVisible = false
    },
    piliangShenhehandleClose() {
      this.dialogVisibleALL = false
    },
    // 批量拒绝
    piliangReject() {
      if (!this.ruleIndex.textarea) {
        this.$message.error("请输入审批意见");
        return;
      }
      // let isArr = [];
      let userinfoapplyIds = ''
      this.multipleSelection.forEach((res) => {
        // isArr.push(res.userinfoCode); 
        userinfoapplyIds += res.userinfoapplyId + ','
      });
      let paramz = {
        // userinfoCode: isArr.toString(),
        memo: this.ruleIndex.textarea,
        userinfoapplyIds: userinfoapplyIds
      };
      updateUserinfoapplyStateFail(paramz)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.msg);
            this.dialogVisibleALL = false;
            this.$refs.temTable.getDataList(this.selUrl);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    // 单个拒绝
    dangeReject(data) {
      if (!this.ruleIndex.textarea) {
        this.$message.error("请输入审批意见");
        return;
      }
      let paramz = {
        // userinfoCode: data.userinfoCode,
        memo: this.ruleIndex.textarea,//审核意见
        // userinfoapplyId: data.userinfoapplyId
        userinfoapplyIds: data.userinfoapplyId
      };
      updateUserinfoapplyStateFail(paramz)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.msg);
            this.dialogVisible = false;
            this.$refs.temTable.getDataList(this.selUrl);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    // 单个用户审核通过
    dangeShenhe(data) {
      if (!this.ruleIndex.textarea) {
        this.$message.error("请输入审批意见");
        return;
      }
      let paramz = {
        // userinfoCode: data.userinfoCode,
        memo: this.ruleIndex.textarea,//审核意见
        // userinfoapplyId: data.userinfoapplyId
        userinfoapplyIds: data.userinfoapplyId
      };
      updateUserinfoapplyState(paramz)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.msg);
            this.dialogVisible = false;
            this.$refs.temTable.getDataList(this.selUrl);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    // 批量入驻审核通过
    piliangShenhe() {
      if (!this.ruleIndex.textarea) {
        this.$message.error("请输入审批意见");
      }
      // let isArr = [];
      let userinfoapplyIds = ''
      this.multipleSelection.forEach((res) => {
        // isArr.push(res.userinfoCode); 
        userinfoapplyIds += res.userinfoapplyId + ','
      });
      let paramz = {
        // userinfoCode: isArr.toString(),
        memo: this.ruleIndex.textarea,
        userinfoapplyIds: userinfoapplyIds
      };
      updateUserinfoapplyState(paramz)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.msg);
            this.dialogVisibleALL = false;
            this.$refs.temTable.getDataList(this.selUrl);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    toggleVisible(arg) {
      this.visiblesee = arg;
      if (!arg) {
        this.$refs.temTable.getDataList(this.selUrl);
      }
    },
    handleSelectionChange(val) {
      //勾选中的行
      // console.log(val, "valqwe");
      this.multipleSelection = val;
    },
    inputBtnClick(item, index) {
      //分配
      if (item.id == "batch") {
        if (this.multipleSelection.length > 0) {
          this.centerDialogVisible = true;
        } else {
          this.$message.error("请选择");
        }
      } else if (item.id == "blacklist") {
        if (this.multipleSelection.length === 0) {
          this.$message.error("请选择待审核的用户");
          console.log('this.multipleSelection:', this.multipleSelection);

          return;
        }
        try {
          this.multipleSelection.forEach((res) => {
            if (res.dataState !== 0) {
              throw new Error("error");
            }
          });
        } catch (e) {
          if (e.message == "error") {
            this.$message.error("请选择待审核的用户");
            console.log('this.multipleSelection:', this.multipleSelection);
            return false;
          }
        }
        this.dialogVisibleALL = true;
      } else if (item.id == "clear") {
        location.reload()
      } else if (item.id == "assignAManagementOrganization") {
        console.log('分配管理组织');
        this.assignAManagementOrganizationVisible = true

      } else if (item.id == "assignARegionalManager") {
        console.log('分配经理');
      }
    },
    tableBtnClick(data, item, index) {
      // 查看
      if (item.id == "Tosees") {
        this.rowInfo = data;
        this.visiblesee = true;
      } else if (item.id == "examine") {
        this.userAudit = data;
        this.dialogVisible = true;
      } else {
      }
    },
    closed() {
      this.userinfoCode = "";
      console.log(this.userinfoCode, "userinfoCode");
    },
    closed2() {
      this.assignAManagementOrganizationVisible = false
    },

    getMember() {
      Mer.queryUserDistributorPageByQuy().then((res) => {
        this.delarOpt = res.list;
        // this.temTable.tableBtn[1].template.html[0].options = res.list;
      });
    },
    assignAManagementOrganizationBtn() {
      console.log('分配管理组织确定按钮');
    },
    selectRowChange(rows) {
      console.log('树形选择器选中的rows', rows);

    }
  },
};
</script>
<style>
.el-message-box__content {
  padding: 0 15px !important;
}

.el-message-box__message {
  text-align: left;
}
</style>
